<template>
  <bazi-section title="宫位分析">
    <view class="ganzhi-containter">
      <view class="gong-tips"
        ><span class="red">红色</span>为喜用，对你有利；<span class="green">绿色</span
        >为忌凶，对你不利</view
      >
      <view class="gong-content">
        <view class="ganzhi_item" style="background-color: #f6f6f6">
          <view class="ganzhi_title" v-for="(item, index) in shizhu" :key="index">{{
            item
          }}</view>
        </view>
        <view class="ganzhi_item">
          <view class="ganzhi_title">天干</view>
          <view class="ganzhi_content" v-for="(item, index) in tiangan" :key="index">
            <view :style="fiveElementInfo(item).color">{{ item }}</view>
            <image class="element-icon" :src="fiveElementInfo(item).img"></image>
          </view>
        </view>
        <view class="ganzhi_item">
          <view class="ganzhi_title">年龄</view>
          <view class="ganzhi_content">1-9岁</view>
          <view class="ganzhi_content">19-27岁</view>
          <view class="ganzhi_content"></view>
          <view class="ganzhi_content">46-54岁</view>
        </view>
        <view class="ganzhi_item">
          <view class="ganzhi_title">身体</view>
          <view class="ganzhi_content">头</view>
          <view class="ganzhi_content">胸</view>
          <view class="ganzhi_content"></view>
          <view class="ganzhi_content">大腿</view>
        </view>
        <view class="ganzhi_item">
          <view class="ganzhi_title cangganshishen_title"> 宫位 </view>
          <view class="ganzhi_content ganzhi_content_cangganShishen">
            <view
              class="jx-border"
              :style="gongweiJX(baziResult.bzPalaceJx.yearGanPalace)"
            ></view>
            祖先宫
          </view>
          <view class="ganzhi_content ganzhi_content_cangganShishen">
            <view
              class="jx-border"
              :style="gongweiJX(baziResult.bzPalaceJx.monthGanPalace)"
            ></view>
            <view>交友宫</view>
            <view>兄弟宫</view>
            <view>父母宫</view>
            <view>事业宫</view>
          </view>
          <view class="ganzhi_content ganzhi_content_cangganShishen"> 夫妻宫 </view>
          <view class="ganzhi_content ganzhi_content_cangganShishen">
            <view
              class="jx-border"
              :style="gongweiJX(baziResult.bzPalaceJx.timeGanPalace)"
            ></view>
            子女宫
          </view>
        </view>
        <view class="ganzhi_item" style="background-color: #f6f6f6">
          <view class="ganzhi_title" v-for="(item, index) in shizhu" :key="index">{{
            item
          }}</view>
        </view>
        <view class="ganzhi_item">
          <view class="ganzhi_title">地支</view>
          <view class="ganzhi_content" v-for="(item, index) in dizhi" :key="index">
            <view :style="fiveElementInfo(item).color">{{ item }}</view>
            <image class="element-icon" :src="fiveElementInfo(item).img"></image>
          </view>
        </view>
        <view class="ganzhi_item">
          <view class="ganzhi_title">年龄</view>
          <view class="ganzhi_content">10-18岁</view>
          <view class="ganzhi_content">28-36岁</view>
          <view class="ganzhi_content">37-45岁</view>
          <view class="ganzhi_content">54岁以上</view>
        </view>
        <view class="ganzhi_item">
          <view class="ganzhi_title">身体</view>
          <view class="ganzhi_content">脖子</view>
          <view class="ganzhi_content">肚子</view>
          <view class="ganzhi_content">屁股</view>
          <view class="ganzhi_content">小腿</view>
        </view>
        <view class="ganzhi_item">
          <view class="ganzhi_title cangganshishen_title">空间</view>
          <view class="ganzhi_content ganzhi_content_cangganShishen">
            <view
              class="jx-border"
              :style="gongweiJX(baziResult.bzPalaceJx.yearZhiPalace)"
            ></view>
            远方
          </view>
          <view class="ganzhi_content ganzhi_content_cangganShishen">
            <view
              class="jx-border"
              :style="gongweiJX(baziResult.bzPalaceJx.monthZhiPalace)"
            ></view>
            家乡
          </view>
          <view class="ganzhi_content ganzhi_content_cangganShishen">
            <view
              class="jx-border"
              :style="gongweiJX(baziResult.bzPalaceJx.dayZhiPalace)"
            ></view>
            <view>居住场所</view>
            <view>工作场所</view>
          </view>
          <view class="ganzhi_content ganzhi_content_cangganShishen">
            <view
              class="jx-border"
              :style="gongweiJX(baziResult.bzPalaceJx.timeZhiPalace)"
            ></view>
            房子附近
          </view>
        </view>
      </view>
    </view>
    <!-- <view v-else>
      <no-vip></no-vip>
    </view> -->
  </bazi-section>
</template>
<script>
import { mapGetters } from "vuex";
import baziSection from "./section.vue";
import wuxingColor from "@/utils/wuxing.js";
export default {
  components: {
    baziSection,
  },
  props: {
    result: {
      type: Object,
      default: {},
    },
  },
  computed: {
    ...mapGetters({
      isVip: "user/isVip",
    }),
  },
  data() {
    return {
      baziResult: this.result,
      tiangan: [],
      dizhi: [],
      shizhu: ["时间", "年柱", "月柱", "日柱", "时柱"],
    };
  },
  mounted() {
    this.tiangan = [
      this.baziResult.yearGan,
      this.baziResult.monthGan,
      this.baziResult.dayGan,
      this.baziResult.timeGan,
    ];
    this.dizhi = [
      this.baziResult.yearZhi,
      this.baziResult.monthZhi,
      this.baziResult.dayZhi,
      this.baziResult.timeZhi,
    ];
  },
  methods: {
    // 宫位吉凶颜色
    gongweiJX(type) {
      if (type == "吉") {
        return "border-color: #890202";
      }
      if (type == "凶") {
        return "border-color: #418902";
      }
      return "border-color: #787878";
    },
    // 对应五行信息
    fiveElementInfo(str) {
      let { color, img } = wuxingColor.getGanzhiWuxingColorInfo(str);
      return {
        color: `color: ${color}`,
        img: `/static/images/bazi/fortune/${img}`,
      };
    },
  },
};
</script>

<style lang="scss" scoped>
.gongwei {
  width: 100%;
  box-sizing: border-box;
}

.section {
  width: 100%;
  height: 72rpx;
  color: white;
  background: #c5a680;
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 10rpx 46rpx;

  .section-title {
    padding-right: 22rpx;
  }
}

.ganzhi-containter {
  display: flex;
  flex-direction: column;
  justify-content: center;

  .gong-tips {
    font-size: 20rpx;
    color: #787878;
    padding: 10rpx 48rpx;

    .red {
      color: #890202;
    }

    .green {
      color: #418902;
    }
  }

  .gong-content {
    padding-bottom: 32rpx;
  }
}

.ganzhi_item {
  display: flex;
  flex-direction: row;
  box-sizing: border-box;
  padding-right: 10rpx;
}

.ganzhi_title {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #808080;
  font-size: 26rpx;
  line-height: 56rpx;
  flex: 1 0;
  box-sizing: border-box;
}

.cangganshishen_title {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}

.ganzhi_content {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  color: #4b240d;
  flex: 1 0;
  font-size: 26rpx;
  line-height: 58rpx;
  position: relative;
  box-sizing: border-box;
}

.jx-border {
  position: absolute;
  width: 88%;
  height: calc(100% + 110rpx);
  border: 2rpx solid;

  bottom: 0;
}

.element-icon {
  width: 36rpx;
  height: 36rpx;
}

.ganzhi_content_cangganShishen {
  flex-direction: column;
  line-height: 38rpx;
  height: fit-content;
}

.ganzhi_content_shensha {
  line-height: 38rpx;
  text-align: center;
}
</style>
